<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<!--    <script type="text/javascript" src="js/jq/jquery-1.11.0.min.js"></script>-->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        /** {*/
        /*    background-color: black;*/
        /*    color: white;*/
        /*}*/
        .draw_area, #bar {
            width: 40%;
            height: 700px;
            margin: 50px 5%;
            float: left;
        }

        #bar2 {
            width: 80%;
            height: 900px;
            margin: 50px 10%;
            float: left;
        }
    </style>
</head>

<body>

<div id="app">
    <h1>数据展示</h1>
    <hr>
    <ul id="general">
        <li v-for="item in dataitems">
            <img src="/static/images/lab.png" width="36">
            <div class="data_div">
                <div class="detail">{{ item.value | numberFormat }}{{ item.unit }}</div>
                <div class="detail">{{ item.name }}</div>
            </div>
        </li>
    </ul>
</div>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="line" class="draw_area"></div>

<div id="pie" class="draw_area"></div>

<div style="clear: both;"></div>

<div id="bar" class="draw_area"></div>

<div id="bar2" class="draw_area"></div>


<script type="text/javascript" src="js/order/pie.js"></script>

<script type="text/javascript" src="js/order/bar.js"></script>

<script type="text/javascript" src="js/order/main_data.js"></script>

<script type="text/javascript" src="js/order/line.js"></script>

<script type="text/javascript" src="js/order/bar2.js"></script>


</body>
</html>